import React from 'react';
import _ from 'lodash';
import { useNode } from '@craftjs/core';
import settings from './settings';
import TableHeader from './components/tableHeader';
import TableContent from './components/tableContent';
import { RealProTable } from './components/realProTable';
import HeaderSearchBar from './components/headerSearch';
import previewImg from '@/assets/images/componentPreview/pro_table.svg';
import styles from './index.less';

const displayName = '高级表格';

export const ProTable = ({ search, header, indexRender, tableSize, columns, paging }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div ref={connect} style={{ padding: '1px' }}>
      {!_.isEmpty(search) && <HeaderSearchBar formList={search} />}
      <div className={styles.tableContainer}>
        {!_.isEmpty(header) ? (
          <TableHeader header={header} />
        ) : (
          <div className={styles.tableHeaderPlaceholder} />
        )}
        <TableContent
          size={tableSize}
          paging={paging}
          columns={columns}
          indexRender={indexRender}
        />
      </div>
    </div>
  );
};

ProTable.craft = {
  displayName,
  props: {
    rowKey: 'id',
    header: {
      headerTitle: '表格',
      headerToolsRender: true,
    },
    indexRender: true,
    tableSize: 'middle',
    columns: [],
    paging: { size: 10 },
    initializationData: true,
    requestConfig: {
      url: '',
    },
  },
  related: {
    settings,
  },
};

export default {
  previewImg,
  displayName,
  component: ProTable,
  realComponent: RealProTable,
};
